<template>
  <div id="app"></div>
</template>

<script>
import * as PIXI from 'pixi.js'
export default {
  setup(){
    // 创建一个PIXI应用
    let app = new PIXI.Application({
      width:window.innerWidth,
      height:window.innerHeight,
      backgroundColor:'white',
      resolution:window.devicePixelRatio || 1
    });

    // 将应用添加到body中
    document.body.appendChild(app.view);

    // 创建一个图形，new一个pixi的graphics对象
    let angle = new PIXI.Graphics();

    // 设置边框的样式,参数依次为：线宽、颜色、透明度; 注意这一步一定在绘制之前，要不然都开始画了你才变样式有jb用啊
    angle.lineStyle(4,0xff1493,1)

    //开始填充并给出颜色, 注意必须给出十六进制形式，不能用别的形式#、字符串什么的，第二个参数是透明度
    angle.beginFill(0xaadd,.2);
    angle.drawRect(0,0,100,100);//通过drawRect绘制一个矩形，参数和canvas里绘制矩形一样，坐标+宽高
    angle.endFill();//结束填充

    // 图形的缩放, 调用angle.scale.set()即可，传入的参数为水平和竖直方向上的倍数
    angle.scale.set(2,2)
    // 图形的位移, 调用angle.position.set()即可，传入的参数为水平和竖直方向上的移动距离
    angle.position.set(100,100);
    // 图形的旋转
    angle.rotation = 2;
    // 可以通过angle.anchor.set()设置图形旋转时的锚点也就是基准点的坐标
    angle.pivot.set(50,50);


    // 创建一个圆形
    let circle = new PIXI.Graphics();
    circle.beginFill(0xfbc2eb,.8);
    circle.drawCircle(400,400,50);//传入圆心坐标和半径即可
    circle.endFill();

    // 绘制一个圆角矩形，其实很像css中加了border-radius的矩形
    let roundRect = new PIXI.Graphics();
    roundRect.beginFill(0xa1c4fd,.9);
    roundRect.drawRoundedRect(500,200,300,200,60);//参数为中心点坐标、宽高、最后是圆角半径(其实有点像border-radius)

    // 绘制一个椭圆
    let ellipes = new PIXI.Graphics();
    ellipes.beginFill(0x84fab0,1);
    ellipes.drawEllipse(200,600,200,100);//坐标、宽高
    ellipes.endFill();

    // 绘制多边形
    let polygon = new PIXI.Graphics();
    polygon.beginFill(0xfa709a,1);
    polygon.drawPolygon([400,0,500,0,500,30,400,20]);//传入一个数组，每两个数字代表一个点的坐标，然后连接成一个多边形。
    polygon.endFill();

    // 绘制圆弧，其实和原生canvas的方法差不多了
    let arc = new PIXI.Graphics();
    arc.beginFill(0x43e97b,1);
    // pixi里的arc和canvas差不多，参数为：坐标、半径、起始角度、结束角度、是否逆时针
    arc.arc(800,400,100,0,Math.PI/3,false);
    arc.endFill();

    // 绘制线段, 其实就是canvas了，但是canvas里通过属性设置样式，这里变成了函数
    let line = new PIXI.Graphics();
    // 你别跟我说这些你还要问我是什么意思
    line.lineStyle(6,0xfff1eb);
    line.moveTo(700,700);
    line.lineTo(800,800);
    line.lineTo(900,700);

    // 不同于传统canvas，你想要你绘制的图形显示在画布里，需要调用app.stage.addChild()把它放进去才行
    app.stage.addChild(angle);
    app.stage.addChild(circle);
    app.stage.addChild(roundRect);
    app.stage.addChild(ellipes);
    app.stage.addChild(polygon);
    app.stage.addChild(arc);
    app.stage.addChild(line);
  }
}
</script>

<style>
canvas{
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
